<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>SlideMenu Demo</title>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.2.0/leaflet.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="../src/L.Control.SlideMenu.css">
        <script src="http://cdn.leafletjs.com/leaflet/v1.2.0/leaflet.js"></script>
        <script src="../src/L.Control.SlideMenu.js"></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="position: absolute; width: 100%; height: 100%;"></div>
        <script>
            var map = L.map('map', {
                center: [33.590241, 130.421222],
                zoom: 15,
                zoomControl: false
            });

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution : '&copy; <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors'
            }).addTo(map);

            // contents
            var left  = '<h1>Slide Menu (Left)</h1>';
            var right = '<h1>Slide Menu (Right)</h1>';
            var contents = '<hr>';
            contents += '<h2>Read Me</h2>';
            contents += '<p>A simple slide menu for Leaflet.<br>';
            contents += 'When you click the menu button and the menu is displayed to slide.<br>';
            contents += 'Please set the innerHTML to slide menu.</p>';
            contents += '<h3>Usage</h3>';
            contents += '<p>L.control.slideMenu("&lt;p&gt;test&lt;/p&gt;").addTo(map);</p>';
            contents += '<h3>Arguments</h3>';
            contents += '<p>L.control.slideMenu(&lt;String&gt;innerHTML, &lt;SlideMenu options&gt;options?)</p>';
            contents += '<h3>Options</h3>';
            contents += '<p>position<br>';
            contents += 'menuposition<br>';
            contents += 'width<br>';
            contents += 'height<br>';
            contents += 'direction<br>';
            contents += 'changeperc<br>';
            contents += 'delay<br>';
            contents += 'icon<br>';
            contents += 'hidden</p>';
            contents += '<h3>Methods</h3>';
            contents += '<p>setContents(&lt;String&gt;innerHTML)</p>';
            contents += '<h3>License</h3>';
            contents += '<p>MIT</p>';

            // left
            L.control.slideMenu(left + contents).addTo(map);

            // right
            var slideMenu = L.control.slideMenu('', {position: 'topright', menuposition: 'topright', width: '30%', height: '400px', delay: '50', icon: 'fa-chevron-left'}).addTo(map);
            slideMenu.setContents(right + contents);

        </script>
    </body>
</html>